<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Edit Password</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../lib/mui/mui.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body {
				background: white;
			}
			.app-primary {
				background-color: rgba(24,103,194,0.81);
				color: white;
			}
			.app-form {
				padding: 40px 32px 0px 32px;
				background: white;
			}
			.app-form input {
				display: block;
				width: 100%;
				margin: 0 auto;
				outline: none;
				padding-top: 26px;
				padding-bottom: 26px;
				border: none;
				border-bottom: 1px solid #eee;
				border-radius: 0px;
				background: none;
			}
		</style>
	</head>

	<body>
		<header class="app-bar mui-bar mui-bar-nav app-no-shadow">
			<button id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left app-bar-btn"></button>
			<h1 class="mui-title">Edit Password</h1>
			<button app-event="reset" class="mui-icon mui-icon-refreshempty mui-pull-right app-bar-btn"></button>
		</header>
		<div class="mui-content">
			<form class="app-form" onsubmit="return false;">
				<div class="app-input-row">
					<label></label>
					<input id='oldpwd' type="password" class="mui-input-clear" placeholder="Old Password">
				</div>
				<div class="app-input-row">
					<label></label>
					<input id="newpwd" type="password" class="mui-input-clear" placeholder="New Password">
				</div>
				<div class="app-input-row">
					<label></label>
					<input id="confirmpwd" type="password" class="mui-input-clear" placeholder="Confirm Password">
				</div>
				<br />
				<br />
				<div class="app-input-row">
					<button app-event="changepwd" class="mui-btn mui-btn-block app-no-border app-background-blue ">Save</button>
				</div>
			</form>
		</div>
	</body>
	<script src="../../lib/mui/mui.js"></script>
	<script src="../../lib/framework/z-app.js"></script>
	<script>
		App.go({
			events : {
				keys : {
					back : function(e) {
						mui.back();
					}
				},
				device : {
					pause : function(e) {
						App.opts.events.custom.reset({});
					},
					resume : function(e){
						App.opts.events.custom.reset({});
					}
				},
				gesture : {
					swiperight : function(e) {
						mui.back();
					}
				},
				custom : {
					reset : function(e) {
						document.getElementsByClassName('app-form')[0].reset();
					},
					changepwd : function(e) {
						// 检查输入合法性
						var op = document.getElementById('oldpwd');
						var np = document.getElementById('newpwd');
						var cp = document.getElementById('confirmpwd');
						if (op.value == '') {
							mui.toast('Old Password required');
							op.focus();
							return false;
						}
						if (np.value == '') {
							alert('New Password required');
							np.focus();
							return false;
						}
						if (cp.value == '') {
							alert('Confirm Password required');
							cp.focus();
							return false;
						}
						if (cp.value != np.value) {
							alert('Password not match');
							cp.focus();
							return false;
						}
						
						var data = { old_pwd : op.value, new_pwd : np.value, confirm_pwd : cp.value };
						App.httpClient().ajax('POST', "/api/user/update-password", data, function(resp){
							mui.toast('success');
							// 通知打开当前页面的那个页面,修改密码成功了
							App.notifyOpener(resp);
							// 关闭当前页面
							mui.back();
						}, function(xhr, type, statusText){
							mui.toast("failed!"+statusText);
						});
					},
				}
			},
			appReady : function() {
			},
		});
	</script>
</html>